<template>
<div class="login-container">
    <!-- 导航栏 -->
    <van-nav-bar
        title="登录页"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        class="nav-bar"
    />
    <van-image
        width="10rem"
        height="auto"
        fit="contain"
        src="src\image\logo.png"
        style="align-self: center; margin-top: 50px; margin-bottom: 10px;"

    />
    <div class="title">
        护家
    </div>

    <van-form @submit="onSubmit" style="margin-top: 20px;">
        <van-cell-group inset>
            <van-field
                v-model="username"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
        </van-cell-group>
        <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
        提交
        </van-button>
        </div>
    </van-form>

    <van-row style="margin-top: 20px;">
        <van-col span="12" class="van-col">
            <van-button type="success" block round @click="handleThirdPartyLogin('0')" class="button">钉钉登录</van-button>
        </van-col>
        <van-col span="12" class="van-col">
            <van-button type="success" block round @click="handleThirdPartyLogin('1')" class="button">微博登录</van-button>
        </van-col>

    </van-row>








</div>



</template>
  
<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
const router = useRouter();
  
  
  // 初始化表单相关的数据
const username = ref('');
const password = ref('');

  

  
  // 表单提交事件处理函数
  const onSubmit = (values) => {
    console.log('表单提交数据：', values);
    // 这里可以添加提交表单数据到后端等具体逻辑，比如调用接口发送数据等
    // 可以进行简单的数据验证等前置操作
    if (!username.value ||!password.value) {
      return;
    }
  };
  
  // 第三方登录处理函数
const handleThirdPartyLogin = (type) => {

    localStorage.setItem('type', type);
    console.log('type', type);
    axios.get(`http://127.0.0.1:8000/users/dingtalklogin/?type=${type}`)
      .then((res) => {
        console.log(res);
        window.location.href = res.data.url;
      })
      .catch((err) => {
        console.error(err);
      });

};
  
</script>
  



<style scoped>

.login-container {
  width: 400px;
  height: 700px;
  background: white;
  position: relative;
  left: 50%;
  top: 100px;
  border-radius: 20px;

  transform: translate(-50%);
  display: flex; /* 添加 Flexbox 布局 */
  flex-direction: column; /* 垂直方向排列子元素 */



}


.nav-bar {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}


.title {
    font-size: 35px;
    margin-top: 15px;
    font-weight: bold;
    text-align: center;
    align-self: center;
    color: rgb(49, 136, 249);
}


.van-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

.button {
    width: 100px;
}


</style>